About
Embedding Guide
API Reference
Source Code

Embedding Guide

One of the best features about Console.js is the ability to embed a console on any website. We have tried to make this as simple as possible.

To start off you need to remember to include the following files:
• jQuery
• Ace
•
console.js
and
console.css


Example using publicly hosted files...
Publicly hosted files
<!--< Include jQuery and Ace >-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
<!--< Include console.js and console.css >-->
<script src="https://cdn.rawgit.com/TarVK/chromeConsole/version-1.0/console.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/TarVK/chromeConsole/version-1.0/console.css" type="text/css" />

Example using locally hosted files...
Locally hosted files
<!--< Relative paths >-->
<script src="/libs/jQuery/jquery.js"></script>
<script src="/libs/ace/ace.js"></script>
<!--< Include console.js and console.css >-->
<script src="/libs/console/console.js"></script>
<script src="/libs/console/console.css"></script>


After adding the above files, we can change an existing html element into a console. You do this as follows:

var cons = $(".console").console({
onInput: function(text){
this.output(text);
},
});

For a full list of options please see the API Reference.

Basic console template


If you just want to copy and paste some code to get going, here is some example code:

Template
<!DOCTYPE html>
<html>
<head>
<!--< Include jQuery and Ace >-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
<!--< Include console.js and console.css >-->
<script src="https://cdn.rawgit.com/TarVK/chromeConsole/version-1.0/console.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/TarVK/chromeConsole/version-1.0/console.css" type="text/css" />
<style>
html, body, .console{
width: 100%;
height: 100%;
margin: 0px;
}
</style>
<script>
$(function(){
var cons = $(".console").console({
onInput: function(text){
this.output(text);
},
});
});
</script>
</head>
<body>
<div class="console"></div>
</body>
</html>

Setting up the JavaScript console

To setup the JavaScript console you will need
jsConsole.sf.js
and setup the worker correctly. Consider the following examples:
Example using public hosted files...
Absolute paths
<!--< Include JavaScript extension >-->
<script src="https://cdn.rawgit.com/TarVK/chromeConsole/version-1.0/extensions/jsConsole/jsConsole.sf.js"></script>
<script> //Setup the JavaScript console worker correctly.
var workerURL = "https://cdn.rawgit.com/TarVK/chromeConsole/version-1.0/extensions/jsConsole/jsConsole.sf.js";
$(function(){
var cons = $(".console").jsConsole({worker:getWorker()});
cons.info("Type javascript here!");
});
//Due to a limitation where you cannot instantiate a worker from a foreign url,
// you have to get the text first using a HTTP request,
// and then submit the data as a blob to the worker constructor.
function getWorker(){
var req = new XMLHttpRequest();
req.open("GET", workerURL, false);
req.send();
var blob;
try{
blob = new Blob([req.responseText], {type: 'application/javascript'});
}catch(e){ // Backwards-compatibility
window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
blob = new BlobBuilder();
blob.append(req.responseText);
blob = blob.getBlob();
}
return URL.createObjectURL(blob);
}
</script>

Example using locally hosted files...
Relative paths
<!--< Include JavaScript extension >-->
<script src="/libs/console/extensions/jsConsole/jsConsole.sf.js"></script>
<script>
var cons = $(".console").workerJsConsole({worker:"/libs/console/extensions/jsConsole/jsConsole.sf.js"});
</script>


Full JavaScript console example


If you just want to copy and paste some code to get going, here is some example code

JavaScript Console
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
<script src="https://cdn.rawgit.com/TarVK/chromeConsole/version-1.0/console.js"></script>
<script src="https://cdn.rawgit.com/TarVK/chromeConsole/version-1.0/extensions/jsConsole/jsConsole.sf.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/TarVK/chromeConsole/version-1.0/console.css" type="text/css" />
<style>
html, body, .console{
width: 100%;
height: 100%;
margin: 0px;
}
</style>
<script>
var workerURL = "https://cdn.rawgit.com/TarVK/chromeConsole/version-1.0/extensions/jsConsole/jsConsole.sf.js";
$(function(){
//var cons = $(".console").jsConsole({worker:"some/relative/location/jsConsole.sf.js"});
var cons = $(".console").jsConsole({worker:getWorker()});
cons.info("Type javascript here!");
});
//Due to a limitation where you cannot instantiate a worker from a foreign url.
function getWorker(){
var req = new XMLHttpRequest();
req.open("GET", workerURL, false);
req.send();
var blob;
try{
blob = new Blob([req.responseText], {type: 'application/javascript'});
}catch(e){ // Backwards-compatibility
window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
blob = new BlobBuilder();
blob.append(req.responseText);
blob = blob.getBlob();
}
return URL.createObjectURL(blob);
}
</script>
</head>
<div class=console></div>
</html>

JavaScript External Console Window

If you don't have access to the console, because, for example, the built in console in the browser is blocked, this plugin can be used to create a JavaScript console to interact with your code for debugging needs.

Unfortunately windows can only be opened on user interaction, so the console will only open after you click somewhere in the page that you are trying to add the console to.

You can either embed the code on your page, or inject the console into a random page.

Embedding the external console window onto your own page

Embedding console window
<!--< This will be your page with your contents >-->
<!DOCTYPE html>
<html>
<head>
<!--< Add the console to the page >-->
<script>
window.script = document.createElement("script");
script.setAttribute("src", "https://cdn.rawgit.com/TarVK/chromeConsole/version-1.0/extensions/jsConsolePlugin/jsConsolePlugin.js");
document.head.appendChild(script);
</script>
<style>
.someRandomPageContents{
background-color: rgb(200,200,200);
}
</style>
<script>
//some script that would be logging information which you for some reason have no access to without embedding the console.
var b = "some variable accessable through the embedded console";
setInterval(function(){
console.log("some message");
}, 2000);
</script>
</head>
<div class="someRandomPageContents">
Click anywhere on the page to open the javascript console
</div>
</html>

Injecting the external console window into an arbitrary page

Unfortunately many web pages like google and youtube don't allow scripts of random domains to be ran, so the injection won't work for these pages.
example.com is an example of a page that this will work on correctly.

There are 3 steps to injecting the console onto an page: 1. Goto your webpage and type 'javascript:' in the addressbar

2. Copy the lines of code provided below and paste them in the addressbar

3. Hit enter and click somewhere in the webpage

Your console should now appear.

Injecting console window
window.script = document.createElement("script");
script.setAttribute("src", "https://cdn.rawgit.com/TarVK/chromeConsole/version-1.0/extensions/jsConsolePlugin/jsConsolePlugin.js");
document.head.appendChild(script);
Page has been last updated on: 27 Jan 2018
Contents
Embedding Guide
Basic console template
Setting up the JavaScript console
Full JavaScript console example
JavaScript External Console Window
Embedding the external console window onto your own page
Injecting the external console window into an arbitrary page